<template>
  <div class="XMC-card-header">
    <div class="left-hubs">
      <div>
        <div class="header-title">{{ title }}</div>
        <div v-if="subTitle" class="header-sub-title xmGray">
          {{ subTitle }}
        </div>
      </div>
      <slot name="select"></slot>
    </div>
    <el-button
      v-if="btnText"
      :type="btnType"
      @click.stop="btnC"
      :disabled="isBtnDisabled"
    >
      {{ btnText }}
    </el-button>
    <slot v-else name="right"></slot>
  </div>
</template>
<script>
  export default {
    name: 'XmCardHeader',
    props: {
      title: String,
      subTitle: String,
      btnText: String,
      btnType: String,
      isBtnDisabled: Boolean,
    },
    emits: ['btnClick'],
    setup(props, context) {
      const btnC = function () {
        context.emit('btnClick')
      }
      return {
        btnC,
      }
    },
  }
</script>
<style lang="scss">
  .XMC-card-header {
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-box-align: center;
    -ms-flex-align: center;
    min-height: 40px;
    margin-bottom: 10px;
    justify-content: space-between;
    align-items: center;
    .header-title {
      font-size: 16px;
      font-weight: 700;
      margin-right: 10px;
    }
    .header-sub-title {
      margin-top: 6px;
      margin-left: 3px;
      font-size: 12px;
    }
    .left-hubs {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
</style>
